<template>
  <view class="container">
    <uv-navbar title="兑换中心" bg-color="transparent"
      :titleStyle="{color: '#fff','font-size': '36rpx','font-weight':'bold'}" left-icon-color="#fff"
      autoBack></uv-navbar>
    <image class="title_bg" src="/static/my/duihuanzhongxin.png"></image>
    <view class="main">
      <view class="main_hezi">
        <view class="main_hezi2"></view>
      </view>
      <view class="main_box">
        <view class="main_box_title">
          <view class="title_line_left"></view>
          <view class="title_main">输入兑换码</view>
          <view class="title_line_right"></view>
        </view>
        <uv-input placeholder="请输入内容" border="surround" v-model="code" @change="change" clearable></uv-input>
        <view class="main_box_footer" @click="gotoUrl">
          <view>兑换记录<uv-icon name="arrow-right" color="#999999" size="14"></uv-icon></view>
        </view>
      </view>
      <view class="main_footer">
        <button :class="code? 'main_footer_btn': 'main_footer_btnnone'" @tap="popShow">立即兑换</button>
      </view>
    </view>
    <uv-popup ref="popupRef" @change="change">
      <view class="pop_main">
        <view class="pop_main_box">
          <image src="/static/my/error.png" mode=""></image>
          <view>
            兑换失败
          </view>
          <text>无效兑换码</text>
        </view>
        <view class="pop_main_footer" @click="popHide">
          确定
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const popupRef = ref();
  const params = reactive({
    pageIndex: 1,
    pageSize: 10
  })
  const code = ref('')
  const change = () => {

  }
  const popShow = () => {
    popupRef.value.open()
  }
  const popHide = () => {
    popupRef.value.close()
  }
  const gotoUrl = () => {
    uni.navigateTo({
      url: '/pages/mySecondary/cashRecord/cashRecord'
    })
  }
  onLoad(() => {
  })
</script>

<style lang="less" scoped>
  .container {
    position: relative;
    background: #fb6451;
    height: 100%;

    .title_bg {
      width: 750rpx;
      height: 770rpx;
    }

    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 9;
      margin-top: -130rpx;

      &_hezi {
        width: 693rpx;
        height: 38rpx;
        background: #ED3017;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &_hezi2 {
        width: 667rpx;
        height: 11rpx;
        background: #BF220C;
        border-radius: 5rpx;
      }

      &_box {
        width: 660rpx;
        height: 313rpx;
        background: #FFFFFF;
        border-radius: 0rpx 0rpx 10rpx 10rpx;
        margin-top: -19rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40rpx 0;
        box-sizing: border-box;

        &::before {
          content: ' ';
          display: flex;
          position: absolute;
          top: 1rpx;
          left: 0;
          width: 660rpx;
          height: 19rpx;
          background: linear-gradient(0deg, #FFFFFF, #F8D7D7);
          border-radius: 0rpx 0rpx 10rpx 10rpx;
        }

        &_title {
          display: flex;
          position: relative;
          align-items: center;

          .title_main {
            width: 200rpx;
            display: flex;
            align-items: center;
            white-space: nowrap;
            justify-content: center;
            font-family: Source Han Sans CN;
            font-size: 36rpx;
            color: #FB6451;
          }

          .title_line_left,
          .title_line_right {
            width: 75rpx;
            height: 1rpx;
            background: #FB6451;
          }
        }

        :deep(.uv-input) {
          width: 558rpx;
          height: 58rpx;
          background: #F4F4F4;
          border-radius: 29rpx;
          flex: 0;
          box-sizing: border-box;
          margin: 50rpx 0;
          border: 0;
        }

        &_footer {
          font-weight: normal;
          font-size: 24rpx;
          color: #B3B3B3;
          display: flex;

          view {
            display: flex;
          }
        }
      }
    }

    .main_footer {
      width: 660rpx;
      height: 88rpx;
      margin-top: 40rpx;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 30rpx;

      &_btn {
        background: #FFCB41;
        border-radius: 10rpx;

        color: #FFFFFF;
      }

      &_btnnone {
        width: 660rpx;
        height: 88rpx;
        background: #DDDDDD;
        border-radius: 10rpx;
        color: #999999;
      }
    }

    .pop_main {
      width: 480rpx;
      height: 352rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;

      &_box {
        flex: 1;
        font-size: 20rpx;
        color: #999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 104rpx;
          height: 104rpx;
        }

        view {
          font-size: 28rpx;
          color: #333333;
          margin: 35rpx 0 14rpx;
        }
      }

      &_footer {
        font-size: 28rpx;
        color: #666666;
        line-height: 36rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1rpx solid rgba(#000, .3);
      }
    }

    :deep(.uv-popup__content) {
      background-color: transparent !important;
    }
  }
</style>